<template>
  <div class="panel-right-container">
    <DataPanel
      class="panel-item-container"
      title="电梯运行状态"
      :height="100"
      icon="/static/img/park/property/facilities.webp"
    >
      <!-- 电梯总数区域 -->
      <div class="quantity-container">
        <TitleBar class="title-container" title="电梯总数">
          <template>
            <div class="title-num-container">
              <div>{{ quantityData.total }}</div>
              <div>台</div>
            </div>
          </template>
        </TitleBar>

        <div class="quantity-info-container">
          <DataBlock
            class="quantity-info-item"
            v-for="(item, index) in quantityData.equipmentList"
            :key="index"
            :main-num="item.total"
            :sub-num="item.abnormal"
            :type="item.name"
          />
        </div>
      </div>

      <!-- 运行状况区域 -->
      <div class="working-container">
        <TitleBar class="title-container" title="运行情况" />

        <div class="working-info-container">
          <OperationGroup
            :data="buildingData"
            @change="operationGroupChangeEvent"
          />

          <ElevatorOperation class="elevator-operation" :data="elevatorList" />
        </div>
      </div>

      <!-- 电梯内监控区域 -->
      <div class="monitor-container">
        <TitleBar class="title-container" title="电梯内监控">
          <template>
            <div class="title-more-container">更多</div>
          </template>
        </TitleBar>
        <div class="monitor-info-container">
          <MonitorCard
            class="monitor-info-item"
            v-for="(item, index) in monitorList"
            :key="item.id"
            :data="item"
            :index="index"
          />
        </div>
      </div>
    </DataPanel>
  </div>
</template>

<script>
import DataPanel from "@/components/park/dataPanel.vue";
import RadioGroup from "@/components/RadioGroup/RadioGroup.vue";
import TitleBar from "@/components/TitleBar/TitleBar.vue";
import OperationGroup from "../OperationGroup/OperationGroup.vue";
import DataBlock from "../DataBlock/DataBlock.vue";
import ElevatorOperation from "../ElevatorOperation/ElevatorOperation.vue";
import MonitorCard from "../MonitorCard/MonitorCard.vue";

//#region 临时展示数据--START
import {
  generateElevatorQuantityData,
  generateBuildingData,
  generateBuildingElevatorData,
  generateBuildingElevatorMonitorData
} from "../../temp/data";
// #endregion 临时展示数据--END

export default {
  name: "RightPanel",
  components: {
    DataPanel,
    RadioGroup,
    TitleBar,
    OperationGroup,
    DataBlock,
    ElevatorOperation,
    MonitorCard
  },
  data() {
    return {
      // 电梯总数相关数据
      quantityData: {
        total: 0,
        equipmentList: []
      },

      // 运行情况相关数据
      buildingData: [],
      elevatorList: [],

      // 电梯内监控相关数据
      monitorList: [],

      //#region 临时展示数据--START
      timer: null
      // #endregion 临时展示数据--END
    };
  },

  created() {
    // 获取相关数据方法
    this.getElevatorQuantityData();
    this.getBuildingData();
    this.getMonitorData();
  },

  methods: {
    /**
     * 操作组 change 事件
     * @param {Object} data 操作组数据值改变数据
     * @param {String|Number} data.mainKey 操作组主按钮值改变数据
     * @param {String|Number} data.subKey 操作组子按钮值改变数据
     */
    operationGroupChangeEvent({ mainKey, subKey }) {
      this.getBuildingElevatorData({ mainKey, subKey });
    },

    /**
     * 获取电梯相关数量方法
     */
    getElevatorQuantityData() {
      this.quantityData = generateElevatorQuantityData();
    },

    /**
     * 获取楼栋相关数据方法
     */
    getBuildingData() {
      this.buildingData = generateBuildingData();
    },

    /**
     * 获取楼栋电梯相关数据方法
     * @param {Object} data 传入请求数据
     */
    getBuildingElevatorData(data) {
      this.elevatorList = generateBuildingElevatorData();
      clearTimeout(this.timer);
      this.timer = setInterval(() => {
        const { elevatorList } = this;
        const elevatorDataList = [];
        elevatorList.forEach(item => {
          let type = item.type;
          if ([0, 1].includes(item.type)) {
            type = 2;
          }
          elevatorDataList.push({ ...item, type });
        });
        this.elevatorList = elevatorDataList;
        setTimeout(() => {
          this.elevatorList = generateBuildingElevatorData(elevatorList, true);
        }, 500);
      }, 2500);
    },

    /**
     * 获取楼栋监控相关数据方法
     */
    getMonitorData() {
      this.monitorList = generateBuildingElevatorMonitorData();
    }
  }
};
</script>

<style lang="less" scoped>
// Title 组件公共样式
.title-container {
  margin-top: 1.25rem;

  .title-num-container {
    display: flex;
    align-items: flex-end;

    & > div:first-child {
      margin-left: 0.625rem;
      font-size: 1.5rem;
      font-family: Chakra Petch Regular;
      color: rgba(176, 224, 255, 1);
      line-height: 1.5rem;
    }

    & > div:last-child {
      margin-left: 0.625rem;
      font-size: 1.125rem;
      font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
      font-weight: 500;
      color: #fff;
      line-height: 1.5rem;
    }
  }

  .title-more-container {
    font-size: 0.875rem;
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1rem;
  }
}

.panel-right-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .panel-item-container {
    height: 100%;

    // 电梯总数区域样式
    .quantity-container {
      display: flex;
      flex-direction: column;
      height: 20%;

      .quantity-info-container {
        display: flex;
        align-items: center;

        .quantity-info-item {
          display: flex;
          width: 30%;
          height: 5.625rem;
          margin-top: 0.9375rem;
          margin-left: 5%;

          &:first-child {
            margin-left: 0;
          }
        }
      }
    }

    // 运行情况区域样式
    .working-container {
      display: flex;
      flex-direction: column;
      height: 44.5%;

      .working-info-container {
        display: flex;
        flex-direction: column;
        height: 100%;
      }

      .elevator-operation {
        height: 100%;
      }
    }

    // 电梯内监控区域样式
    .monitor-container {
      display: flex;
      flex-direction: column;
      height: 35.5%;

      .monitor-info-container {
        display: flex;
        align-items: flex-start;
        align-content: flex-start;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.9375rem;

        .monitor-info-item {
          width: 48.5%;
          height: 6.25rem;
          flex-shrink: 0;
        }
      }
    }
  }
}
</style>
